<template>
    <div style="height: 50vh; width: 1000px">
        <vueCropper
            ref="cropper"
            :img="example2.img"
            :outputSize="example2.size"
            :outputType="example2.outputType"
            :info="example2.info"
            :canScale="example2.canScale"
            :autoCrop="example2.autoCrop"
            :autoCropWidth="example2.autoCropWidth"
            :autoCropHeight="example2.autoCropHeight"
            :fixedBox="example2.fixedBox"
            :fixed="example2.fixed"
            :fixedNumber="example2.fixedNumber"
        ></vueCropper>
        <button @click="down('blob')">开始</button>
        
        <Upload
            multiple
            :action="uploadImgUrl"
            :headers="upLoadheaders"
            :data="upload"
            @on-success="uplaodSuccess"
            @on-error="uploadError"
        >
            <Button icon="ios-cloud-upload-outline">Upload files</Button>
        </Upload>
    </div>
</template>
<script>
import vueCropper from 'vue-cropper'

import {uploadToken} from 'api/uploadImage'
import Config from '@/config'
import axios from 'axios'


export default {
	data: function () {
		return {
			example2: {
				img: 'http://ofyaji162.bkt.clouddn.com/bg1.jpg',
				info: true,
				size: 1,
				outputType: 'jpeg',
                canScale: false,
                fixedBox: true,
				autoCrop: true,
				// 只有自动截图开启 宽度高度才生效
				autoCropWidth: 300,
				autoCropHeight: 250,
				// 开启宽度和高度比例
				fixed: true,
				fixedNumber: [4, 3]
            },
            downImg: '#',
            uploadImgUrl: '',
            upload: {
                policy: '',
                fileBucket: ''
            },
            upLoadheaders: {
                'Content-Type' : 'multipart/form-data'
            }

		}
    },
    created(){
         this.uploadImgUrl = Config.uploadImgUrl
         this.getUploadToken()
        // uploadToken().then(_data => console.log(_data))
    },
	methods: {
        getUploadToken(){
            uploadToken().then(res => {

                this.upload.policy = res.data.filePolicy
                this.upload.signature = res.data.fileSignature
                this.upload.fileBucket = res.data.fileBucket
                this.uploadImgUrl = this.uploadImgUrl + res.data.fileBucket
                // var formData = new FormData()
                // formData.append("policy", res.data.filePolicy)
                // formData.append("signature", res.data.fileSignature)
                // formData.append("file", data)
                // formData.append("fileBucket", res.data.fileBucket)

                
                // axios.post('http://192.168.2.108:8080/api/upload', { data: formData }).then(d => console.log(d))
                // axios({
                //     method: 'POST',
                //     url: `${Config.uploadImgUrl}${res.data.fileBucket}`,
                //     data: formData,
                //     headers: { 
                //         'Content-Type' : 'multipart/form-data'
                //     }
                // }).then(_data => console.log(_data))
                // console.log(formData)
                // axios(`https://v0.api.upyun.com/${res.data.fileBucket}`, formData).then(suc => console.log(suc))
            })
        },
        uplaodSuccess(response, file, fileList){
            // console.log(response, file, fileList)
        },
        uploadError(error, file, fileList){
            // console.log(error, file, fileList)
        },
        down(type){
            var aLink = document.createElement('a')
			aLink.download = 'demo'
			// 输出
			if (type === 'blob') {
				this.$refs.cropper.getCropBlob((data) => {
                    // console.log(data)
                    uploadToken().then(res => {
                        var formData = new FormData()
                        formData.append("policy", res.data.filePolicy)
                        formData.append("signature", res.data.fileSignature)
                        formData.append("file", data)
                        formData.append("fileBucket", res.data.fileBucket)

                        
                        // axios.post('http://192.168.2.108:8080/api/upload', { data: formData }).then(d => console.log(d))
                        axios({
                            method: 'POST',
                            url: `${Config.uploadImgUrl}${res.data.fileBucket}`,
                            data: formData,
                            headers: { 
                                'Content-Type' : 'multipart/form-data'
                            }
                        }).then(_data => {
                            // console.log(_data)
                        })
                        // console.log(formData)
                        // axios(`https://v0.api.upyun.com/${res.data.fileBucket}`, formData).then(suc => console.log(suc))
                    })
				})
			} else {
				this.$refs.cropper.getCropData((data) => {
					this.downImg = data
					aLink.href = data
					aLink.click()
				})
			}
        }
	},
	components: {
		vueCropper
	},
}
</script>
